.level-process{
	width: 100%;
	height: 254rpx;
	margin-top: 14rpx;
	background-image: url('https://mp-a6359cef-e1f5-4478-96f8-00fab19c712c.cdn.bspapp.com/cloudstorage/65c9dcb7-1507-4ebe-ad26-79dc3d2b6467.png');
	background-size: 100% 100%;
	position: relative;
	.title{
		position: absolute;
		top:8rpx;
		left: 22rpx;
		font-size: 28rpx;
		font-family: $global-font-family;
		font-weight: bold;
		color: #000000;
	}
	.entry{
		height: 34rpx;
		font-size: 24rpx;
		font-family: $global-font-family;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 34rpx;
		position: absolute;
		display: flex;
		align-items: center;
		top: 24rpx;
		right: 42rpx;
	}
	.main{
		position: absolute;
		top: 92rpx;
		left: 32rpx;
		.identity{
			height: 56rpx;
			font-size: 40rpx;
			font-family: $global-font-family;
			font-weight: bold;
			color: #000000;
			line-height: 56rpx;
		}
		.process{
			position: relative;
			.process-wrapper{
				width: 368rpx;
				height: 10rpx;
				margin-top: 14rpx;
				margin-bottom: 16rpx;
				border-radius:8rpx;
				overflow: hidden;
				// box-shadow: 0rpx 2rpx 4rpx 2rpx rgba(227,110,19,0.3);
			}
			.tie-rod{
				width: 22rpx;
				height: 22rpx;
				background: #E36E13;
				box-shadow: 0rpx 2rpx 4rpx 2rpx rgba(227,110,19,0.3);
				border: 2rpx solid #FFFFFF;
				border-radius: 50%;
				position: absolute;
				top: 50%;
				transform: translate(-50%,-50%);
				left: 0;
				animation-name: tieRodMove;
				animation-duration: .6s;
				animation-timing-function:linear;
				animation-fill-mode:forwards;
			}
		}

		.next-level{
			height: 34rpx;
			font-size: 24rpx;
			font-family: $global-font-family;
			font-weight: 400;
			color: #AC4B00;
			line-height: 34rpx;
		}
	}
}

@keyframes tieRodMove{
	0%{
		left: 0;
	}
	100%{
		left: 60%;
		animation-play-state: paused;
	}
}